<template>
  <div class="cont-new">
    <div class="dia">
      <div class="header">
        <!-- <div class="title">标签显示过滤</div> -->
        <div class="close" @click="emit('close')">X</div>
      </div>
      <div class="content">
        <div class="label-title">快速过滤</div>
        <div class="top-fileter">
          <div
            class="pf"
            v-for="(item, index) in ptlist"
            :class="{ active: ksFilter.indexOf(item.type) > -1 }"
            :key="index"
            @click="addks(item)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="label-title mt20">类型过滤</div>
        <div
          class="lx-box"
          v-for="(item, index) in listDetailInfo"
          :key="index"
        >
          <checkboxlabel
            v-model="form[index + 1]"
            :listp="item.children"
            :defaultSelect="form[index + 1]"
          >
            <template #img>
              <img :src="item.icon" />
            </template>
            <template #title> {{ item.name }} </template>
          </checkboxlabel>
        </div>
      </div>
      <div class="button-content" @click="confirm">确定</div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  tags: {
    default: [],
    type: Array,
  },
  vid: String,
});
const emit = defineEmits(["close", "change"]);
const state = reactive({
  data: [],
  icons: [],
  slist: [],
  all: true,
  isind: false,
});
watch(
  () => props.vid,
  (newval) => {
    getList();
  }
);

// 快速过滤
let ptlist = ref([
  {
    name: "点数据",
    type: "point",
  },
  {
    name: "面数据",
    type: "polygon",
  },
  {
    name: "线数据",
    type: "line",
  },
]);
let ksFilter = ref(["point", "line", "polygon"]);
const addks = (item) => {
  let index = ksFilter.value.indexOf(item.type);
  if (index > -1) {
    ksFilter.value.splice(index, 1);
  } else {
    ksFilter.value.push(item.type);
  }
};

let listDetailInfo = ref([]);

let form = ref({
  1: [],
  2: [],
  3: [],
  4: [],
  5: [],
  6: [],
  7: [],
});
const getList = () => {
  useApi
    .post("/dynamicview/ar/taglist", {
      deviceId: props.vid,
    })
    .then((res) => {
      // debugger;
      let catchlist = [];
      res.data.tagList.forEach((item, index) => {
        let ctag = [];
        let ctags = JSON.parse(item.tagObj || "[]");
        for (let key in ctags) {
          ctag.push({
            name: ctags[key],
            id: key,
            icon: item.icon
          });
          form.value[index + 1].push(key);
        }
        catchlist.push({
          name: item.name,
          id: item.id,
          icon: item.icon,
          children: ctag,
        });
      });
      listDetailInfo.value = catchlist;
    });
};

const confirm = () => {
  console.log(form.value);
  let arr = [];
  for (let key in form.value) {
    arr = [...arr, ...form.value[key]];
  }
  console.log(arr);
  emit("change", { list: arr, type: ksFilter.value });
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.cont-new {
  width: 522px;
  height: 703.5px;
  background: url("/images/new/bqgl.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .dia {
    width: 100%;
    height: 100%;
    .header {
      width: 100%;
      height: 50px;
      position: relative;
      .close {
        width: 40px;
        height: 40px;
        position: absolute;
        right: 42px;
        top: 25.5px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        font-size: 30px;
        cursor: pointer;
      }
    }
    .button-content {
      position: absolute;
      width: 100%;
      height: 70px;
      text-align: center;
      bottom: 10px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 25px;
      color: #ffffff;
      line-height: 70px;
      letter-spacing: 3px;
      cursor: pointer;
    }
    .content {
      margin-top: 20px;
      width: 100%;
      height: 550px;
      overflow: auto;
      padding: 0 40px;
      .label-title {
        width: 100%;
        height: 30px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 21px;
        color: #ffffff;
        line-height: 30px;
        letter-spacing: 1.5px;
        padding-left: 15px;
        position: relative;
        &::before {
          content: "";
          width: 5px;
          height: 24px;
          background: #3eeeff;
          position: absolute;
          left: 0;
          top: 3px;
        }
      }
      .top-fileter {
        width: 100%;
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .pf {
          width: 134px;
          height: 50px;
          background: url("/images/new/pf.png") no-repeat;
          background-size: 100% 100%;
          text-align: center;
          line-height: 50px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 21px;
          color: #ffffff;
          cursor: pointer;
          &.active {
            color: yellow;
          }
        }
      }
      .lx-box {
        width: 100%;
        height: 189px;
        margin-top: 9px;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.cont {
  // width: 300px;
  width: 522px;
  height: 703.5px;
  background: url("/images/new/bqgl.png") no-repeat;
  background-size: 100% 100%;
}

.dia {
  margin-top: 5px;
  width: 100%;
  min-height: 138px;
  display: flex;
  flex-direction: column;

  // .header {
  //   width: 100%;
  //   height: 38px;
  //   background-image: url("/images/bg03.png");
  //   background-size: 100% 100%;
  //   background-repeat: no-repeat;
  //   display: flex;
  //   align-items: center;

  //   .title {
  //     margin-left: 30px;
  //     font-weight: 600;
  //     font-size: 14px;
  //     color: #ffffff;
  //   }

  //   .close {
  //     margin: 8px 2px 0 auto;
  //     width: 30px;
  //     height: 30px;
  //     cursor: pointer;
  //     opacity: 0.5;
  //   }
  // }

  .content {
    // width: 300px;
    // min-height: 200px;
    // background-image: url("/images/bg04.png"), url("/images/bbg.png");
    // background-size: 100% 11%, 100% 100%;
    // background-position-y: 103%, 0;
    // background-repeat: no-repeat;
    // padding: 8px;

    .cusk {
      .el-checkbox {
        width: 84px;
        height: 80px;
        margin: 5px;
        position: relative;
        background-image: url("/images/bgcheck.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;

        &:hover {
          background-image: url("/images/bgcheckhot.png");
        }

        :deep(.el-checkbox__input) {
          position: absolute;
          left: 5px;
          top: 5px;
        }

        .cuschk {
          width: 84px;
          height: 80px;
          margin-left: -9px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .img {
            width: 30px;
            height: 30px;
          }

          .txt {
            margin-top: 8px;
            font-weight: 600;
            font-size: 12px;
            color: #ffffffb4;
          }
        }
      }
    }
  }
}

.line {
  margin-top: 8px;
  margin-left: 15px;
  width: 256px;
  height: 2px;
  background-image: url("/images/line.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.bottom {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 5px 10px 0;

  :deep(.el-checkbox__label) {
    color: #ffffffb4;
  }

  .txt {
    margin-left: auto;
    font-weight: 600;
    font-size: 14px;
    color: #ffffffb4;
  }
}
</style>